<template>
  <div class="goods-list">
    <div class="title">{{ title }}</div>
    <div class="list-container">
      <div
        v-for="g in goodsList"
        :key="g.goodsId"
        class="goods"
        @click="jumpDetail(g)"
      >
        <img :src="localIP + g.goodsCoverImg" alt="" />
        <div class="goods-info">
          <div class="goods-name">{{ g.goodsIntro }}</div>
          <div class="selling-price">￥{{ g.sellingPrice }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { localIP } from '@/utils'
export default {
  name: 'GoodsList',
  props: {
    title: {
      required: true,
      type: String
    },
    goodsList: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      localIP
    }
  },
  methods: {
    jumpDetail(item) {
      this.$router.push({
        path: '/detail',
        query: {
          goodsId: item.goodsId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.title {
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: @primary;
  background-color: #f9f9f9;
}
.list-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  .goods {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    padding: 15px;
    border-bottom: 1px solid #e9e9e9;
    &:nth-child(odd) {
      border-right: 1px solid #e9e9e9;
    }
    > img {
      width: 120px;
    }
    .goods-info {
      padding: 10px 0;
      .goods-name {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .selling-price {
        text-align: center;
        font-size: 16px;
        color: @primary;
      }
    }
  }
}
</style>
